<template>
	<view class="col333 f26r pb20r foWei500">
		<navbar background="background-image: linear-gradient(to right, #2c6739, #99c043);"
			title="我的"
		></navbar>
		<view class="pt30r pl20r pr20r">
			<view class="poRel">
				<view class="w130r h130r mAuto" @click="cliLoginBtn()">
					<image :src="token ?
						(avatarUrl ? avatarUrl : baseUrl + 'iconHeadPortrait.png')
						:
						(baseUrl + 'iconHeadGray.png')"
						class="wPer100 hPer100 borRad50P" mode="aspectFit"
					></image>
					<!-- <image :src="baseUrl + 'iconHeadGray.png'"
						class="wPer100 hPer100 borRad50P" mode="aspectFit"
					></image> -->
					<!-- <image :src="baseUrl + 'iconHeadPortrait.png'"
						class="wPer100 hPer100 borRad50P" mode="aspectFit"
					></image> -->
				</view>
				<button v-show="token"
					open-type="chooseAvatar" @chooseavatar="cliPhotographWhite"
					class="poAbs bom0 left50P trTrX10r backCol0a0a0aS3 borRad50P w50r h50r teAliCenter boSiBorBox pt4r notBtnSty p0 lhNormal"
				>
					<image :src="baseUrl + 'iconPhotographWhite.png'" mode="aspectFit"
						class="w40r h40r disInBlo"
					></image>
				</button>
			</view>
			<view class="teAliCenter foWeiBold f34r mt15r"
				@click="cliLoginBtn()"
			>
				{{
					token ? 
					userInfo.nickname ? userInfo.nickname : '微信用户-暂未设置昵称'
					:
					'立即登录'
				}}
				<image :src="baseUrl + 'iconPenGreen.png'" mode="aspectFit"
					class="w50r h50r poRel top14r" v-show="token"
				></image>
			</view>
			<view class="borRad10r backColWhite pl20r pr20r pb20r mt30r">
				<view class="f32r lh90r foWeiBold">
					我的钱包
				</view>
				<view class="disFlex teAliCenter lh120r">
					<view class="flex1 backImgLiGrTBFcfdffaF9fafe borRad10r"
						@click="goUrl('/pages/index/walletList')"
					>
						茶室余额
					</view>
					<view class="w15r"
					></view>
					<view class="flex1 backImgLiGrTBF9fffbaF8fefa borRad10r"
						@click="goUrl('/pages/index/moneyDetailed')"
					>
						充值明细
					</view>
					<view class="w15r"
					></view>
					<view class="flex1 backImgLiGrTBFcfbf9aFff8f6 borRad10r"
						@click="goUrl('/pages/personalCenter/memberInformation')"
					>
						会员信息
					</view>
				</view>
			</view>
			<!-- <view class="borRad10r backColWhite pl20r pr20r pb20r mt30r">
				<view class="f32r lh90r foWeiBold">
					<text class="w8r h30r backCol2c6739 disInBlo poRel top4r borRad8r"
					></text>
					我的订单
				</view>
				<view class="disFlex teAliCenter">
					<view class="flex1">
						<image :src="baseUrl + 'iconOrder1.png'" mode="aspectFit"
							class="w50r h50r"
						></image>
						<view class="mt10r">
							待付款
						</view>
					</view>
					<view class="flex1">
						<image :src="baseUrl + 'iconOrder2.png'" mode="aspectFit"
							class="w50r h50r"
						></image>
						<view class="mt10r">
							待使用
						</view>
					</view>
					<view class="flex1">
						<image :src="baseUrl + 'iconOrder3.png'" mode="aspectFit"
							class="w50r h50r"
						></image>
						<view class="mt10r">
							使用中
						</view>
					</view>
					<view class="flex1">
						<image :src="baseUrl + 'iconOrder4.png'" mode="aspectFit"
							class="w50r h50r"
						></image>
						<view class="mt10r">
							已完成
						</view>
					</view>
					<view class="flex1">
						<image :src="baseUrl + 'iconOrder5.png'" mode="aspectFit"
							class="w50r h50r"
						></image>
						<view class="mt10r">
							全部
						</view>
					</view>
				</view>
			</view> -->
			<view class="borRad10r backColWhite pl20r pr20r pb20r mt30r">
				<view class="disFlex aliItCenter h80r">
					<view class="f32r foWeiBold flex1">
						<text class="w8r h30r backCol2c6739 disInBlo poRel top4r borRad8r"
						></text>
						邀请好友
						<view @click="goUrl('/pages/invitationRelevant/invitationCode')"
							class="disInBlo w150r h40r bor1S99c043 f24r col99c043 teAliCenter borRad8r ml20r"
						>
							<image :src="baseUrl + 'iconOrder5.png'" mode="aspectFit"
								class="w30r h30r poRel top5r"
							></image>
							邀请码
						</view>
					</view>
					<view class="w150r f24r teAliRight"
						@click="goUrl('/pages/invitationRelevant/promotionAmbassador')"
					>
						查看更多
						<image :src="baseUrl + 'iconRightBlack.png'" mode="aspectFit"
							class="w20r h20r"
						></image>
					</view>
				</view>
				<view class="disFlex h120r aliItCenter">
					<view class="flex1">
						<view class="f36r foWeiBold">
							{{userInfo.amount ? userInfo.amount : 0}}
						</view>
						<view class="col787878 mt20r">
							可提现佣金（元）
						</view>
					</view>
					<view class="w150r">
						<view class="colFff lh50r wPer100 backCol99c043 teAliCenter borRad25r"
							@click="goUrl('/pages/invitationRelevant/cashWithdrawal')"
						>
							提现
						</view>
					</view>
				</view>
			</view>
			<view class="borRad10r backColWhite pl20r pr20r pb50r mt30r">
				<view class="f32r lh90r foWeiBold mb30r">
					<text class="w8r h30r backCol2c6739 disInBlo poRel top4r borRad8r"
					></text>
					用户服务
				</view>
				<view class="disInBlo wPer25 teAliCenter"
					@click="goUrl('/pages/index/memberCenter')"
				>
					<image :src="baseUrl + 'iconVipCrad.png'" mode="aspectFit"
						class="w50r h50r"
					></image>
					<view class="mt10r">
						会员卡
					</view>
				</view>
				<view class="disInBlo wPer25 teAliCenter"
					@click="cliCertificateBtn(0)"
				>
					<image src="/static/icons/iconMeituanGreen.png" mode="aspectFit"
						class="w50r h50r"
					></image>
					<view class="mt10r">
						美团卡券
					</view>
				</view>
				<view class="disInBlo wPer25 teAliCenter"
					@click="cliCertificateBtn(1)"
				>
					<image src="/static/icons/iconTrillGreen.png" mode="aspectFit"
						class="w50r h50r"
					></image>
					<view class="mt10r">
						抖音团购
					</view>
				</view>
				<view class="disInBlo wPer25 teAliCenter"
					@click="cliCertificateBtn(2)"
				>
					<image :src="baseUrl + 'iconOrder3.png'" mode="aspectFit"
						class="w50r h50r"
					></image>
					<view class="mt10r">
						优惠券
					</view>
				</view>
				<!-- <view class="disInBlo wPer25 teAliCenter"
					@click="goUrl('/pages/personalCenter/exchangeCenter')"
				>
					<image :src="baseUrl + 'iconExchangeGreen.png'" mode="aspectFit"
						class="w50r h50r"
					></image>
					<view class="mt10r">
						兑换中心
					</view>
				</view> -->
			<!-- 	<view class="disInBlo wPer25 teAliCenter"
					@click="goUrl('/pages/personalCenter/freeTea')"
				>
					<image :src="baseUrl + 'iconAboutTea.png'" mode="aspectFit"
						class="w50r h50r"
					></image>
					<view class="mt10r">
						免费约茶
					</view>
				</view> -->
			</view>
			<view class="borRad10r backColWhite pl20r pr20r pb50r mt30r">
				<view class="f32r lh90r foWeiBold mb30r">
					<text class="w8r h30r backCol2c6739 disInBlo poRel top4r borRad8r"
					></text>
					商家服务
				</view>
				<view class="disInBlo wPer25 teAliCenter"
					@click="goUrl('/pages/personalCenter/joinInCooperation')"
				>
					<image :src="baseUrl + 'iconJoinGreeb.png'" mode="aspectFit"
						class="w50r h50r"
					></image>
					<view class="mt10r">
						加盟合作
					</view>
				</view>
				<view class="disInBlo wPer25 teAliCenter"
					@click="goUrl('/pages/personalCenter/shareholderRed')"
				>
					<image :src="baseUrl + 'iconShareholderGreen.png'" mode="aspectFit"
						class="w50r h50r"
					></image>
					<view class="mt10r">
						股东分红
					</view>
				</view>
			</view>
			<view class="borRad10r backColWhite pl20r pr20r pb50r mt30r">
				<view class="f32r lh90r foWeiBold mb30r">
					<text class="w8r h30r backCol2c6739 disInBlo poRel top4r borRad8r"
					></text>
					其它服务
				</view>
				<navigator class="disInBlo wPer25 teAliCenter" hover-class="none"
					url="/pages/personalCenter/helpCenter?type=1"
				>
					<image :src="baseUrl + 'iconHelpCenter.png'" mode="aspectFit"
						class="w50r h50r"
					></image>
					<view class="mt10r">
						帮助中心
					</view>
				</navigator>
				<navigator class="disInBlo wPer25 teAliCenter" hover-class="none"
					url="/pages/personalCenter/helpCenter?type=2"
				>
					<image :src="baseUrl + 'iconAboutUs.png'" mode="aspectFit"
						class="w50r h50r"
					></image>
					<view class="mt10r">
						关于我们
					</view>
				</navigator>
				<button open-type="contact" class="disInBlo wPer25 teAliCenter notBtnSty p0 f26r lhNormal col333 backColTransparent overVis">
					<image :src="baseUrl + 'iconOnlineService.png'" mode="aspectFit"
						class="w50r h50r"
					></image>
					<view class="mt10r">
						在线客服
					</view>
				</button>
				<view class="disInBlo wPer25 teAliCenter"
					@click="cliClearCache"
				>
					<image src="/static/icons/iconClearGreen.png" mode="aspectFit"
						class="w50r h50r"
					></image>
					<view class="mt10r">
						清除缓存
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import navbar from '@/components/navbar.vue'
import { imgNetUrl, baseUrl } from '@/utils/request.js'
import { bindAvatarName, getMemberlist } from '@/utils/api.js'
export default {
	components: { navbar },
	data() {
		return {
			token: '',
			userInfo: {},
			imgNetUrl,
			baseUrl,
			avatarUrl: ''
		}
	},
	onLoad() {

	},
	onShow() {
		this.getInfo();
	},
	onShareAppMessage(res) {
	    if (res.from === 'button') {
	        console.log(res.target)
	    }
	    return {
	        title: '山雀壹®共享茶室',
			imageUrl: '/static/images/logo.png',
	        path: '/pages/index/index',
	        mpId: 'wxf8003ea15566ecd1'
	    }
	},
	onShareTimeline(res) {
	    return {
	        title: '山雀壹®共享茶室',
	        type: 0,
	        summary: "",
	    }
	},
	methods: {
		getInfo() {
			// #ifdef MP-WEIXIN
				const token = uni.getStorageSync('token');
			// #endif
			// #ifdef H5
				const token = '2eae0f660b498bdc724dee1efa63407e';//改后尾：417e
				uni.setStorage({
					key: 'token', data: token
				})
			// #endif
			if(token) {
				this.token = token;
				getMemberlist({token}).then(res1 => {
					this.userInfo = res1.data;
					this.avatarUrl = this.userInfo.avatar_url ? this.imgNetUrl + this.userInfo.avatar_url : '';
					uni.setStorage({
						key: 'userInfo', data: this.userInfo,
						success:res2 => { }
					})
				})
			}else {
				this.token = '';
				this.userInfo = {};
			}
		},
		cliLoginBtn() {
			if(this.token) {
				uni.navigateTo({ url: '/pages/personalCenter/userInformation' })
			}else {
				uni.navigateTo({ url: '/pages/personalCenter/login?type=2' })
			}
		},
		cliPhotographWhite(eee) {
			wx.getFileSystemManager().readFile({
				filePath: eee.detail.avatarUrl, //选择图片返回的相对路径
				encoding: "base64",//这个是很重要的
				success: res1 => { //成功的回调
					//返回base64格式
					bindAvatarName({
						token: this.token,
						avatar_url: 'data:image/jpeg;base64,' + res1.data
					}).then(res2 => {
						this.avatarUrl = eee.detail.avatarUrl;
						uni.showToast({
							title: '头像修改成功', duration: 3000
						})
					})
				}
			})
		},
		goUrl(url) {
			if(this.token) {
				uni.navigateTo({ url })
			}else {
				uni.navigateTo({ url: '/pages/personalCenter/login?type=2' })
			}
		},
		cliCertificateBtn(type) {
			uni.navigateTo({ url: '/pages/personalCenter/certificateList?type=' + type })
		},
		cliClearCache() {
			uni.showModal({
				title: '提示', content: '确定清除全部缓存？', confirmColor: '#99c043',
				success:res1 => {
					if (res1.confirm) {
						uni.clearStorageSync();
						this.getInfo();
						uni.showToast({
							title: '清除成功', duration: 3000
						})
					}
				}
			})
		}
	}
}
</script>